<template>
  <div class="container" v-loading="status_loading">
    <el-row>
      <el-form :model="formInline" @keyup.enter.native="search">
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.quality.qccode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.qccode"></el-input>
          </el-form-item>
          <el-form-item label="SKU" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.productspeccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.sigin.noticenumber')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.noticenumber"></el-input>
          </el-form-item>
          <el-form-item label="SupplierCode" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.suppliercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.quality.checkDate')" :label-width="formLabelWidth">
            <el-col :span="11">
              <el-form-item>
                <el-date-picker
                  @change="checkDate"
                  type="date"
                  :placeholder="$t('m.in.choosedate')"
                  v-model="formInline.startdate"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2" align="center">-</el-col>
            <el-col :span="11">
              <el-form-item prop="enddate">
                <el-date-picker
                  @change="checkDate"
                  type="date"
                  :placeholder="$t('m.in.choosedate')"
                  v-model="formInline.enddate"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button
              type="primary"
              @click="search"
              v-if="hasPermission('search')"
            >{{$t('m.query')}}</el-button>
            <el-button @click="print" v-if="hasPermission('print')">{{$t('m.print')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-table
      ref="table"
      stripe
      empty-text
      fits
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange">
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="qccode" :label="$t('m.quality.qccode')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-qccode')">
            <el-button type="text" @click.stop="qualityResult(scope.row)">{{scope.row.qccode}}</el-button>
            <template v-if="scope.row.remark">
              <el-tooltip effect="dark" :content="scope.row.remark" placement="bottom">
                <i class="el-icon-chat-dot-square tooltips"></i>
              </el-tooltip>
            </template>
          </template>
          <template v-else>{{scope.row.qccode}}</template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('m.state')" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state==1">{{$t('m.quality.state1')}}</span>
          <span v-if="scope.row.state==2">{{$t('m.quality.state2')}}</span>
          <span v-if="scope.row.state==3">{{$t('m.quality.state3')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="signintasknumber" :label="$t('m.tasknumber')"></el-table-column>
      <el-table-column align="center" prop="tsareacode" :label="$t('m.sigin.tsareacode')"></el-table-column>
      <el-table-column
        align="center"
        prop="isqualitycontrol"
        :label="$t('m.quality.isqualitycontrol')"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.isqualitycontrol==1">{{$t('m.yes')}}</span>
          <span v-if="scope.row.isqualitycontrol==0">{{$t('m.no')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="noticenumber" :label="$t('m.sigin.noticenumber')"></el-table-column>
      <el-table-column align="center" prop="receiving" :label="$t('m.quality.receiving')"></el-table-column>
      <el-table-column
        align="center"
        prop="receivingdate"
        :label="$t('m.quality.receivingdate')"
      ></el-table-column>
      <el-table-column align="center" prop="qcuser" :label="$t('m.quality.qcuser')"></el-table-column>
      <el-table-column align="center" prop="qcdate" :label="$t('m.quality.checkDate')"></el-table-column>
    </el-table>

    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper"
      :page-sizes="pageSizeList"
      :page-size="rowSize"
      :current-page="page"
      :total="totalRows"
      @current-change="currentChangeInitFn"
      @size-change="handleSizeChangeInitFn"
    ></el-pagination>

    <!-- 质检结果 dialog 开始 -->
    <el-dialog
      @close="close"
      width="1200px"
      :title="$t('m.quality.result')"
      :visible.sync="dialogFormVisible"
    >
      <el-form align="left" ref="formQualityResult" :model="formQualityResult">
        <el-row>
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item
              size="large"
              :label="$t('m.quality.qccode')"
              :label-width="formLabelWidth"
              prop="qccode"
            >
              <el-input disabled v-model="formQualityResult.qccode" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              size="large"
              :label="$t('m.quality.qcuser')"
              :label-width="formLabelWidth"
              prop="qcuser"
            >
              <el-input disabled v-model="formQualityResult.qcuser" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              size="large"
              :label="$t('m.state')"
              :label-width="formLabelWidth"
              prop="state"
            >
              <span v-if="formQualityResult.state==1">{{$t('m.quality.state1')}}</span>
              <span v-if="formQualityResult.state==2">{{$t('m.quality.state2')}}</span>
              <span v-if="formQualityResult.state==3">{{$t('m.quality.state3')}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item
              size="large"
              :label="$t('m.in.noticenumber')"
              :label-width="formLabelWidth"
              prop="noticenumber"
            >
              <el-input disabled v-model="formQualityResult.noticenumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              size="large"
              :label="$t('m.quality.checkDate')"
              :label-width="formLabelWidth"
              prop="qcdate"
            >
              <el-input disabled v-model="formQualityResult.qcdate" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item size="large" :label="$t('m.in.receive')" :label-width="formLabelWidth" prop="signquantity">
              <el-input disabled v-model="formQualityResult.signquantity" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              :label="$t('m.tasknumber')"
              :label-width="formLabelWidth"
              prop="qccode"
              size="large"
            >
              <el-input disabled v-model="formQualityResult.signintasknumber" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('m.page.product')+$t('m.code')"
              :label-width="formLabelWidth"
              prop="productspeccode"
              size="large"
            >
              <el-input disabled v-model="formQualityResult.productspeccode" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item
              :label="$t('m.quality.passedqty')"
              :label-width="formLabelWidth"
              prop="passedqty"
              size="large"
            >
              <el-input disabled v-model="formQualityResult.passedqty" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item
              :label="$t('m.page.location')+$t('m.code')"
              :label-width="formLabelWidth"
              prop="passedlocationcode"
              size="large"
            >
              <el-input disabled v-model="formQualityResult.passedlocationcode" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item
              :label="$t('m.tasknumber')"
              :label-width="formLabelWidth"
              prop="tasknumber"
              size="large"
            >
              <el-input disabled v-model="formQualityResult.tasknumber" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item
              :label="$t('m.quality.unqualifiedqty')"
              :label-width="formLabelWidth"
              prop="unqualifiedqty"
              size="large"
            >
              <el-input disabled v-model="formQualityResult.unqualifiedqty" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item
              size="large"
              :label="$t('m.page.location')+$t('m.code')"
              :label-width="formLabelWidth"
              prop="unqualifiedlocationcode"
            >
              <el-input
                disabled
                v-model="formQualityResult.unqualifiedlocationcode"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item
              :label="$t('m.tasknumber')"
              :label-width="formLabelWidth"
              prop="failedtasknumber"
              size="large"
            >
              <el-input disabled v-model="formQualityResult.failedtasknumber" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :xs="12"
            :sm="12"
            :md="12"
            :lg="8"
            :xl="8"
            v-for="(item,index) in formQualityResult.batchattr"
            :key="index"
          >
            <el-form-item :label="item.label" :label-width="formLabelWidth">
              <el-input disabled size="mini" v-model="item.value" autocomplete="off"></el-input>
            </el-form-item>
            <!-- {{item}} -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              :label="$t('m.remark')"
              :label-width="formLabelWidth"
              prop="remark"
              size="large"
            >
              <el-input
                type="textarea"
                disabled
                v-model="formQualityResult.remark"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="btns">
        <el-button size="mini" @click="close">{{$t('m.close')}}</el-button>
      </div>
    </el-dialog>
    <!-- 质检结果 dialog 结束 -->
  </div>
</template>

<script>
import common from '@/utils/common'
import { getLodop } from '@/utils/LodopFuncs'
export default {
  data(){
    return {
      status_loading:false,
      formInline:{
        noticenumber:'',
        productspeccode:'',
        qccode:'',
        qcdatestart:'',
        qcdateend:'',
        suppliercode:''
      },
      tableData:[],
      dialogFormVisible:false,
      formQualityResult:{
        arrivalnoticeid:null,
        batchattr:[],
        isqualitycontrol:null,
        noticenumber:'',
        ordernumber:'',
        passedlocationcode:'',
        passedlocationid:null,
        passedqty:null,
        productid:null,
        productname:'',
        productspec:'',
        productspeccode:'',
        qccode:'',
        qcdate:'',
        qcid:null,
        qcuser:'',
        qualitycontrolid:null,
        receiving:'',
        receivingdate:'',
        receivingid:null,
        receivingqty:null,
        signintasknumber:'',
        state:null,
        suppliercode:'',
        tasknumber:'',
        tsareacode:'',
        tsareaid:null,
        unqualifiedlocationcode:'',
        unqualifiedlocationid:null,
        unqualifiedqty:0,
        remark:''
      },
      formLabelWidth:'160px',
      location:[]
    }
  },
  methods:{
    print(){
      if (!this.tableRowSelected.length)
        return this.$message(
          this.$t('m.chooseprint') + this.$t('m.quality.qccode')
        )
      let id = this.tableRowSelected[0].qualitycontrolid
      let LODOP = getLodop()
      let obj = {
        ids:[id],
        templateName:'quality'
      }
      this.$axios({
        method:'post',
        url:'/printtemplate/query',
        data:obj
      }).then(({data})=> {
        this.printContent = data
        eval(this.printContent)
        LODOP.SET_PRINT_PAGESIZE(1, '50mm', '30mm', '')
        LODOP.PREVIEW()
      })
    },
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/qc/historylist',
        params:{
          page:this.page,
          rows:this.rowSize,
          noticenumber:this.formInline.noticenumber,
          productspeccode:this.formInline.productspeccode,
          qccode:this.formInline.qccode,
          qcdatestart:this.formInline.startdate,
          qcdateend:this.formInline.enddate,
          suppliercode:this.formInline.suppliercode
        }
      }).then(({data})=> {
        for (let i = 0; i < data.records.length; i++){
          data.records[
            i
          ].receivingdate = common.timestampToTime(
            data.records[i].receivingdate
          )
          data.records[i].qcdate = common.timestampToTime(
            data.records[i].qcdate
          )
        }

        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
      })
    },
    checkDate(){
      if (this.formInline.enddate < this.formInline.startdate){
        this.$message({
          showClose:true,
          message:this.$t('m.check.date'),
          type:'warning',
          duration:1000
        })
      }
    },
    search(){
      if (this.formInline.startdate && this.formInline.enddate){
        this.formInline.startdate = common.timestampSimple(
          this.formInline.startdate
        )
        this.formInline.enddate = common.timestampSimple(
          this.formInline.enddate
        )
      }
      this.page = 1
      this.init()
    },
    close(){
      this.dialogFormVisible = false
      this.init()
    },
    qualityResult(row){
      let that = this
      this.$axios({
        method:'get',
        url:`/qc/tasknumber?signintasknumber=${row.signintasknumber}`
      }).then(({data})=> {
        data.batchattr = JSON.parse(
          data.batchattr
        )

        that.formQualityResult = data
        that.formQualityResult.qcdate = common.timestampToTime(
          data.qcdate
        )
        that.dialogFormVisible = true
      })
    }
  },
  activated(){
    this.init()
  },
  beforeRouteLeave(to, form, next){
    this.dialogFormVisible=false
    next()
  }
}
</script>
<style lang="scss" scoped>
.el-form-item--mini span {
  font-size: 10px;
}
.tooltips {
  font-size: 18px;
  color: #409eff;
  margin-left: 4px;
  vertical-align: middle;
}
</style>